<template>
    <div class="cityList">
        <mt-index-list>
            <mt-index-section v-for="index in cityIndex" :index="index" key="index">
                <div class="city_item" 
                    v-for="city in (filterCity(index))" 
                    @click="$emit('click',city.name)"
                    key="city.pinyin">{{city.name}}</div>
            </mt-index-section>
        </mt-index-list>
    </div>
</template>

<script>
    import cityList from './cityList.js'
    export default {
        name:'cityList',
        data(){
            return{
                cityIndex:[
                    'A','B','C','D','E','F','G',
                    'H','I','J','K','L','M','N',
                    'O','P','Q','R','S','T','U',
                    'V','W','X','Y','Z'
                ]
            }
        },
        methods:{
            filterCity(index){
               return cityList.filter((city)=>{
                    return city.pinyin.slice(0,1) == index
                })
            }
        }
    }
</script>

<style lang="scss" scoped>

    .cityList{
        width:100%;
        height:100%;
        background:#fff;

        .city_item{
            padding:35px;
            // box-shadow: 0 1px 0 0 #ccc;
            border-bottom:1px solid #ccc;
        }
    }
</style>

